<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src/node/class.node.accordion.js - sceneGraph.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../../logo/logoCGSG_256x57.png" title="sceneGraph.js"></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: v2.1.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/CGSG.html">CGSG</a></li>
            
                <li><a href="../classes/CGSGAccordion.html">CGSGAccordion</a></li>
            
                <li><a href="../classes/CGSGAnimationManager.html">CGSGAnimationManager</a></li>
            
                <li><a href="../classes/CGSGAnimationMethod.html">CGSGAnimationMethod</a></li>
            
                <li><a href="../classes/CGSGBindEntry.html">CGSGBindEntry</a></li>
            
                <li><a href="../classes/CGSGButtonMode.html">CGSGButtonMode</a></li>
            
                <li><a href="../classes/CGSGCollisionGhostOnDemandTester.html">CGSGCollisionGhostOnDemandTester</a></li>
            
                <li><a href="../classes/CGSGCollisionManager.html">CGSGCollisionManager</a></li>
            
                <li><a href="../classes/CGSGCollisionMethod.html">CGSGCollisionMethod</a></li>
            
                <li><a href="../classes/CGSGCollisionRegionTester.html">CGSGCollisionRegionTester</a></li>
            
                <li><a href="../classes/CGSGCollisionTesterFactory.html">CGSGCollisionTesterFactory</a></li>
            
                <li><a href="../classes/CGSGColor.html">CGSGColor</a></li>
            
                <li><a href="../classes/CGSGCSSManager.html">CGSGCSSManager</a></li>
            
                <li><a href="../classes/CGSGDimension.html">CGSGDimension</a></li>
            
                <li><a href="../classes/CGSGEvent.html">CGSGEvent</a></li>
            
                <li><a href="../classes/CGSGEventManager.html">CGSGEventManager</a></li>
            
                <li><a href="../classes/CGSGHandleBox.html">CGSGHandleBox</a></li>
            
                <li><a href="../classes/CGSGImgManager.html">CGSGImgManager</a></li>
            
                <li><a href="../classes/CGSGInterpolator.html">CGSGInterpolator</a></li>
            
                <li><a href="../classes/CGSGInterpolatorLinear.html">CGSGInterpolatorLinear</a></li>
            
                <li><a href="../classes/CGSGInterpolatorTCB.html">CGSGInterpolatorTCB</a></li>
            
                <li><a href="../classes/CGSGKeyFrame.html">CGSGKeyFrame</a></li>
            
                <li><a href="../classes/CGSGMap.html">CGSGMap</a></li>
            
                <li><a href="../classes/CGSGMask.html">CGSGMask</a></li>
            
                <li><a href="../classes/CGSGMaskCache.html">CGSGMaskCache</a></li>
            
                <li><a href="../classes/CGSGMaskClip.html">CGSGMaskClip</a></li>
            
                <li><a href="../classes/CGSGMath.html">CGSGMath</a></li>
            
                <li><a href="../classes/CGSGNode.html">CGSGNode</a></li>
            
                <li><a href="../classes/CGSGNodeButton.html">CGSGNodeButton</a></li>
            
                <li><a href="../classes/CGSGNodeCircle.html">CGSGNodeCircle</a></li>
            
                <li><a href="../classes/CGSGNodeColorPicker.html">CGSGNodeColorPicker</a></li>
            
                <li><a href="../classes/CGSGNodeCurveTCB.html">CGSGNodeCurveTCB</a></li>
            
                <li><a href="../classes/CGSGNodeDomElement.html">CGSGNodeDomElement</a></li>
            
                <li><a href="../classes/CGSGNodeEllipse.html">CGSGNodeEllipse</a></li>
            
                <li><a href="../classes/CGSGNodeImage.html">CGSGNodeImage</a></li>
            
                <li><a href="../classes/CGSGNodeLine.html">CGSGNodeLine</a></li>
            
                <li><a href="../classes/CGSGNodeSlider.html">CGSGNodeSlider</a></li>
            
                <li><a href="../classes/CGSGNodeSliderHandle.html">CGSGNodeSliderHandle</a></li>
            
                <li><a href="../classes/CGSGNodeSprite.html">CGSGNodeSprite</a></li>
            
                <li><a href="../classes/CGSGNodeSquare.html">CGSGNodeSquare</a></li>
            
                <li><a href="../classes/CGSGNodeTabMenu.html">CGSGNodeTabMenu</a></li>
            
                <li><a href="../classes/CGSGNodeText.html">CGSGNodeText</a></li>
            
                <li><a href="../classes/CGSGNodeWebview.html">CGSGNodeWebview</a></li>
            
                <li><a href="../classes/CGSGParticle.html">CGSGParticle</a></li>
            
                <li><a href="../classes/CGSGParticleEmitter.html">CGSGParticleEmitter</a></li>
            
                <li><a href="../classes/CGSGParticleSystem.html">CGSGParticleSystem</a></li>
            
                <li><a href="../classes/CGSGPickNodeMethod.html">CGSGPickNodeMethod</a></li>
            
                <li><a href="../classes/CGSGPosition.html">CGSGPosition</a></li>
            
                <li><a href="../classes/CGSGRegion.html">CGSGRegion</a></li>
            
                <li><a href="../classes/CGSGRotation.html">CGSGRotation</a></li>
            
                <li><a href="../classes/CGSGScale.html">CGSGScale</a></li>
            
                <li><a href="../classes/CGSGSceneGraph.html">CGSGSceneGraph</a></li>
            
                <li><a href="../classes/CGSGSection.html">CGSGSection</a></li>
            
                <li><a href="../classes/CGSGTimeline.html">CGSGTimeline</a></li>
            
                <li><a href="../classes/CGSGTraverser.html">CGSGTraverser</a></li>
            
                <li><a href="../classes/CGSGVector2D.html">CGSGVector2D</a></li>
            
                <li><a href="../classes/CGSGView.html">CGSGView</a></li>
            
                <li><a href="../classes/CGSGWEBVIEWMODE.html">CGSGWEBVIEWMODE</a></li>
            
                <li><a href="../classes/CGSGWrapMode.html">CGSGWrapMode</a></li>
            
                <li><a href="../classes/GLOBAL_CONSTANTS.html">GLOBAL_CONSTANTS</a></li>
            
                <li><a href="../classes/GLOBAL_METHODS.html">GLOBAL_METHODS</a></li>
            
                <li><a href="../classes/GLOBAL_PROPERTIES.html">GLOBAL_PROPERTIES</a></li>
            
                <li><a href="../classes/UTIL_ARRAY.html">UTIL_ARRAY</a></li>
            
                <li><a href="../classes/WUICCGSGNodeImageFactory.html">WUICCGSGNodeImageFactory</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="../modules/Animation.html">Animation</a></li>
            
                <li><a href="../modules/Collision.html">Collision</a></li>
            
                <li><a href="../modules/Math.html">Math</a></li>
            
                <li><a href="../modules/Node.html">Node</a></li>
            
                <li><a href="../modules/ParticleSystem.html">ParticleSystem</a></li>
            
                <li><a href="../modules/Scene.html">Scene</a></li>
            
                <li><a href="../modules/Util.html">Util</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: src/node/class.node.accordion.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * This class represents an Accordion.
 * @class CGSGAccordion
 * @module Node
 * @extends CGSGNode
 * @constructor
 * @param {Number} x Relative position on X
 * @param {Number} y Relative position on Y
 * @param {Number} width Relative dimension
 * @param {Number} height Relative Dimension
 * @param {Number} sectionWidth Relative Dimension
 * @param {Number} sectionHeight Relative Dimension
 * @type {CGSGAccordion}
 * @author $Author$
 */
var CGSGAccordion = CGSGNode.extend(
    {
        initialize: function (x, y, width, height, sectionWidth, sectionHeight) {
            this._super(x, y, width, height);

            this.lineWidth = sectionWidth;
            this.lineHeight = sectionHeight;
            this.interLine = 2;
            this.padding = 5;
            this.speed = 10;

            this.sections = [];

            /**
             * Event
             * @property onSectionChanged
             * @default null
             * @type {Function}
             */
            this.onSectionChanged = null;

        },

        /**
         * Add a new section on the accordion.
         * @method buildAndAddSection
         * @param {CGSGNode} title
         * @param {CGSGNode} core
         */
        buildAndAddSection: function (title, core) {
            var section = new CGSGSection(0, 0, this.lineWidth, this.lineHeight);
            //add the title to the section.
            section.setTitle(title);

            //add the core to the section
            section.setCore(core);

            //place the section at the end of the accordion
            section.translateTo(0, this.sections.length * (this.lineHeight + this.interLine));
            section.index = this.sections.length;
            this.sections.push(section);

            //bind selection onClick
            var that = this;
            section.onClick = function (e) {
                that.selectSection(e.data.node);
            };

            this.addChild(section);
            return section;
        },

        /**
         * remove a section from the accordion.
         * @method removeSectionAt
         * @param {Number} index
         */
        removeSectionAt: function (index) {

            var section = this.sections.splice(index, 1);

            this.removeChild(section[0], true);

            //replace all element
            this.deselectAll();

            //return removed section
            return section;
        },

        /**
         * Display the core of the selected
         * @method selectSection
         * @param {CGSGSection} section
         */
        selectSection: function (section) {
            var open = section.isOpen !== true;
            this.deselectAll();

            if (open) {
                //animate the selection
                CGSG.animationManager.animate(section, &quot;dimension.height&quot;, this.speed, section.getHeight(),
                                              section.getHeight() + section.core.getHeight() + this.padding, 0);
                CGSG.animationManager.animate(section, &quot;mask._maskRegion.dimension.height&quot;, this.speed, this.lineHeight,
                                              this.lineHeight + section.core.getHeight() + this.padding, 0);

                //translate other section
                for (var i = 0; i &lt; this.sections.length; i++) {
                    if (section.index &lt; this.sections[i].index) {
                        CGSG.animationManager.animate(this.sections[i], &quot;position.y&quot;, this.speed,
                                                      this.sections[i].position.y,
                                                      section.core.getHeight() + this.padding +
                                                      this.sections[i].index * (this.lineHeight + this.interLine), 0);
                    }
                }
            }
            section.isOpen = open;
        },

        /**
         * deselect all the section.
         * @method deselectAll
         */
        deselectAll: function () {

            for (var i = 0; i &lt; this.sections.length; i++) {
                //reorder the section
                CGSG.animationManager.animate(this.sections[i], &quot;position.y&quot;, this.speed, this.sections[i].position.y,
                                              this.sections[i].index * (this.lineHeight + this.interLine), 0);

                //hide the core of the selected this.sections[i]
                if (this.sections[i].isOpen) {
                    CGSG.animationManager.animate(this.sections[i], &quot;mask._maskRegion.dimension.height&quot;, this.speed,
                                                  this.sections[i].mask._maskRegion.dimension.height, this.lineHeight,
                                                  0);
                    CGSG.animationManager.animate(this.sections[i], &quot;dimension.height&quot;, this.speed,
                                                  this.sections[i].getHeight(), this.lineHeight, 0);
                    this.sections[i].isOpen = false;
                }
            }
        }
    }
);

/**
 * This class represents a Accordion.
 * @class CGSGSection
 * @module Node
 * @extends CGSGNode
 * @constructor
 * @param {Number} x Relative position on X
 * @param {Number} y Relative position on Y
 * @param {Number} width Relative dimension
 * @param {Number} height Relative Dimension
 * @author $Author$
 */
var CGSGSection = CGSGNode.extend(
    {
        initialize: function (x, y, width, height) {
            this._super(x, y);
            this.resizeTo(width, height);

            this._backgroundColor = &quot;#605C55&quot;;
            this.lineHeight = this.getHeight();
            this.isOpen = false;
            this.index = null;
            this.mask = new CGSGMaskClip(new CGSGRegion(0, 0, this.getWidth(), this.getHeight()));
            this.mask.apply(this);

        },

        /**
         * set the title of the section header
         * @method setTitle
         * @param {String} title
         */
        setTitle: function (title) {

            var titleNode = new CGSGNodeText(0, 0, title);
            titleNode.setSize(12);
            titleNode.color = &quot;white&quot;;
            titleNode.isClickable = false;

            this.titleNode = title;
            this.titleNode.translateTo(this.getHeight(), (this.getHeight() - this.titleNode.getHeight() ) / 2);
            this.addChildAt(titleNode, 0);
        },

        /**
         * set the core of the section
         * @method setCore
         * @param {CGSGNode} core
         */
        setCore: function (core) {
            this.core = core;
            this.addChildAt(this.core, 1);
            this.core.translateTo((this.getWidth() - this.core.getWidth() ) / 2, this.getHeight());
        },

        /**
         * change the background color of the section
         * @method setBackgroundColor
         * @param color
         */
        setBackgroundColor: function (color) {
            this._backgroundColor = color;
        },

        render: function (ctx) {
            ctx.beginPath();
            ctx.fillStyle = this._backgroundColor;
            ctx.globalAlpha = &quot;0.8&quot;;

            //display background
            ctx.fillRect(0, 0, this.getWidth(), this.getHeight());

            //display icon
            ctx.fillStyle = &quot;white&quot;;
            ctx.moveTo(this.lineHeight / 3, this.lineHeight / 3);
            if (this.isOpen) {
                ctx.lineTo(2 * this.lineHeight / 3, this.lineHeight / 3);
                ctx.lineTo(this.lineHeight / 2, 2 * this.lineHeight / 3);
                ctx.lineTo(this.lineHeight / 3, this.lineHeight / 3);
            }
            else {
                ctx.lineTo(2 * this.lineHeight / 3, this.lineHeight / 2);
                ctx.lineTo(this.lineHeight / 3, 2 * this.lineHeight / 3);
                ctx.lineTo(this.lineHeight / 3, this.lineHeight / 3);
            }
            ctx.fill();

            ctx.closePath();
        }
    }
);


    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
